<template>
	<view class="find">
		<tabBar></tabBar>
		<view class="nav" :style="{ top: distanceY }" :class="{ nbg: currentIndex == 'rec' }">
			<view class="article" :class="{ active: currentIndex == 'article' }" @tap="changeMenu('article')">精选文章</view>
			<view class="rec" :class="{ active: currentIndex == 'rec' }" @tap="changeMenu('rec')">好物推荐</view>
		</view>
		<view class="find-con" :style="{ 'margin-top': distanceY !== 0 ? mt : '38px' }" v-if="currentIndex == 'article'">
			<view class="sub-nav">
				<view class="icons-item" v-for="(item, index) in iconList" @tap="changeIcons(index, item.id)" :class="{ active: index == current }">
					<image :src="icons[index]"></image>
				</view>
			</view>
			<view class="aritlces">
				<view class="aritlce-item" @tap="goAritlceDetail(item.id)" v-for="item in aritlceList">
					<view class="aritlce-detail">
						<image :src="item.coverImg" mode="scaleToFill"></image>
						<view class="article-title">
							<view class="title">{{ item.title }}</view>
							<view class="author">{{ item.author }}</view>
						</view>
					</view>
					<view class="info">
						<view class="info-l">
							<image src="../../static/image/icons/view.png" mode=""></image>
							{{ item.viewCount }}
						</view>
						<view class="info-r">
							<image src="../../static/image/icons/zan.png" mode=""></image>
							{{ item.viewCount }}
							<image src="../../static/image/icons/share.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="goods" v-else>
			<view class="goods-item" v-for="item in seriesList" :style="{ background: `url(${item.bg_img}) no-repeat top left / cover` }">
				<view class="title">
					<view class="ename">{{ item.ename }}</view>
					<view class="cname">{{ item.cname }}</view>
				</view>
				<view class="productList">
					<swiper class="swiper" previous-margin="128rpx" next-margin="40rpx">
						<swiper-item  class="item" v-for="subItem in item.productList">
							<view class="product-item" @tap="productDetail(subItem.id)">
								<image :src="subItem.cover_img" mode=""></image>
								<view class="info">
									<view class="cname">
										{{ subItem.gname }}
									</view>
									<view class="ename">
										EnglishName
									</view>
									<view class="color">
										
									</view>
									<view class="price">
										￥{{ subItem.price_now }}
									</view>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { seriesAll, aritlceList } from '../../utils/find/index.js';
import { list } from '../../utils/kind/index.js';
import chuangyi from '../../static/image/icons/chuangyi.png';
import shipin from '../../static/image/icons/shipin.png';
import fengge from '../../static/image/icons/fengge.png';
import dengju from '../../static/image/icons/dengju.png';
import tabBar from '@/components/TabBar/TabBar.vue';
export default {
	data() {
		return {
			currentIndex: 'article',
			icons: [chuangyi, shipin, fengge, dengju],
			current: 0,
			seriesList: [],
			iconList: [],
			kindId: '',
			aritlceList: [],
			distanceY: uni.getStorageSync('distanceY') || 0,
			mt: 0
		};
	},
	methods: {
		changeMenu(val) {
			this.currentIndex = val;
		},
		changeIcons(index, id) {
			console.log(1);
			this.current = index;
			this.kindId = id;
			this.getAritlceList();
		},
		async getSeriesAll() {
			let data = await seriesAll();
			console.log(data);
			this.seriesList = data.data.data;
			console.log(this.seriesList);
		},
		async getAritlceList() {
			let data = await aritlceList({
				kindId: this.kindId
			});
			this.aritlceList = data.data.data.list;
		},
		goAritlceDetail(id) {
			console.log(id);
			uni.navigateTo({
				url: `/pages/find/aritlce-detail/aritlce-detail?id=${id}`
			});
		},
		productDetail (id) {
			console.log(id);
			uni.navigateTo({
				url: `/pages/find/product/product?id=${id}`
			});
		}
	},
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1500);
	},
	onReachBottom() {},
	async onLoad() {
		this.getSeriesAll();
		let data = await list();
		console.log(data);
		this.kindId = data.data.data[0].id;
		this.iconList = data.data.data;
		let alist = await aritlceList({
			kindId: this.kindId
		});
		this.aritlceList = alist.data.data.list;
		console.log(this.aritlceList);
	},
	components: {
		tabBar
	},
	onShow() {
		// console.log(uni.getStorageSync('distanceY').slice(0,2)*1 + 76)
		if (uni.getStorageSync('distanceY')) {
			this.mt = uni.getStorageSync('distanceY').slice(0,2)*1 + 38 + 'px';
			console.log(this.mt);
		}
	}
};
</script>

<style lang="scss">
@import '../../static/scss/mixin.scss';
.find {
	width: 100vw;
	height: 100%;
	.nav {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100vw;
		// height: 76rpx;
		height: 38px;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #ffffff;
		letter-spacing: 2.29rpx;
		background-color: #354e44;
		&.nbg {
			background-color: transparent;
		}
		.article {
			margin-right: 48rpx;
		}
		.article,
		.rec {
			position: relative;
			height: 100%;
			@include cen;
			&::after {
				position: absolute;
				bottom: 5rpx;
				right: 0;
				content: '';
				width: 64rpx;
				height: 6rpx;
				background: #ffffff;
				border-radius: 3rpx;
				display: none;
			}
			&.active {
				&::after {
					display: block;
				}
			}
		}
	}
	.find-con {
		// margin-top: 76rpx;
		margin-top: 38px;
		// padding-top: 76rpx;
		// position: relative;
		// top: 76rpx;
		background-color: #f1ece7;
		width: 100%;
		height: 100%;
		border-radius: 30rpx 30rpx 0 0;
		.sub-nav {
			width: 100%;
			box-sizing: border-box;
			padding: 30rpx 110rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.icons-item {
				width: 98rpx;
				height: 98rpx;
				border-radius: 50%;
				transform: scale(0.86);
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				transition: all 0.3s;
				&.active {
					transform: scale(1);
					background-color: #354e44;
				}
				image {
					width: 50%;
					height: 50%;
				}
			}
		}
		.aritlces {
			width: 100%;
			box-sizing: border-box;
			padding: 0 40rpx;
			overflow: hidden;
			.aritlce-item {
				width: 100%;
				border-radius: 20rpx;
				overflow: hidden;
				margin-bottom: 56rpx;
				.aritlce-detail {
					position: relative;
					width: 100%;
					height: 382rpx;
					image {
						width: 100%;
						height: 100%;
					}
					.article-title {
						position: absolute;
						left: 20rpx;
						bottom: 0;
						font-size: 48rpx;
						color: #ffffff;
						letter-spacing: 3.43rpx;
						.author {
							font-size: 30rpx;
							letter-spacing: 2.14rpx;
							margin: 5rpx 0 24rpx;
						}
					}
				}
				.info {
					height: 100rpx;
					box-sizing: border-box;
					padding: 0 57rpx 0 53rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;
					background-color: #fff;
					.info-l {
						image {
							width: 44rpx;
							height: 28rpx;
						}
					}
					.info-r {
						image {
							width: 39rpx;
							height: 39rpx;
							&:last-child {
								margin-left: 43rpx;
							}
						}
					}
				}
			}
		}
	}
	.goods {
		position: relative;
		width: 100%;
		height: 100vh;
		.goods-item {
			width: 100%;
			height: 100%;
			padding-top: 76rpx;
			.title {
				color: #ffffff;
				margin-left: 40rpx;
				.ename {
					font-size: 26rpx;
					letter-spacing: 1.86rpx;
				}
				.cname {
					font-size: 72rpx;
					letter-spacing: 5.14rpx;
					width: 463rpx;
				}
			}
			.productList {
				position: absolute;
				bottom: 158rpx;
				.swiper{
					width: 100vw;
					height: 264rpx;
					.item {
						.product-item {
							width: 496rpx;
							height: 264rpx;
							background-color: #fff;
							border-radius: 10rpx;
							display: flex;
							align-items: center;
							box-sizing: border-box;
							padding: 50rpx;
							image {
								height: 100%;
							}
							.info {
								margin-left: 20rpx;
								.cname {
									font-size: 28rpx;
									color: #333;
									font-weight: bolder;
								}
								.ename {
									font-size: 26rpx;
									color: #ccc;
								}
								.price {
									margin-top: 30rpx;
									font-size: 28rpx;
									color: #333;
									font-weight: bolder;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
